import React, { Component } from "react";
// state 是 StateCom 类实例化对象的一个属性
export default class StateCom extends Component {
  //声明状态
  state = {
    //count
    count: 100,
  };

  //声明一个方法 handle 处理  click 点击
  handleClick = () => {
    //正确的方式  set 设置 state 状态. 当调用 setState 之后, 会更新 state 的值, 再次调用 render 方法进行重新渲染
    this.setState({
      count: this.state.count + 1,
    });
  }

  //渲染方法
  render() {
    //这里的 this 是指向实例对象的, 因为 render 方法是由实例对象调用的
    // console.log(this);
    // let res = this.handleClick.call(this);//这个不行
    // let res = this.handleClick.bind(this);//这个可以
    return (
      <div>
        <h2>{this.state.count}</h2>
        {/* 1. 修改函数的 this 指向 */}
        {/* <button onClick={this.handleClick.bind(this)}>新增</button> */}
        {/* 2. 方式二 */}
        {/* <button onClick={this.handleClick}>新增</button> */}
        {/* 3. 方式三  箭头函数赋值 */}
        <button onClick={this.handleClick}>新增</button> 
      </div>
    );
  }
}
